<template>
  <view>
    <view class="bottom-buttons">
      <button class="btn retreat" @tap="handleRetreat">{{ retreatText }}</button>
      <button class="btn confirm" 
              :class="{ disabled: isConfirmDisabled }"
              :disabled="isConfirmDisabled" 
              @tap="handleConfirm">
        {{ confirmText }}
      </button>
    </view>

    <!-- 退回确认弹窗 -->
    <Modal :isVisible="isModalVisible" 
           :message="'确定要退回吗？'"
           @cancel="handleCancel"
           @confirm="handleModalConfirm" />
  </view>
</template>

<script>
// 引入 Modal.vue 组件，确保路径正确
import Modal from '@/components/bottons/prompt.vue';  // 请检查路径是否正确

export default {
  components: {
    Modal
  },
  data() {
    return {
      isModalVisible: false, // 控制提示框显示
      isConfirmDisabled: false // 控制确认按钮是否可点击
    };
  },
  props: {
    retreatText: {
      type: String,
      default: "退回",
    },
    confirmText: {
      type: String,
      default: "确认",
    },
  },
  methods: {
    handleRetreat() {
      this.isModalVisible = true;  // 打开弹窗
      this.isConfirmDisabled = true; // 先禁用确认按钮
    },
    handleCancel() {
      this.isModalVisible = false;  // 关闭弹窗
      this.isConfirmDisabled = false; // 重新启用确认按钮
    },
    handleModalConfirm() {
      this.isModalVisible = false;  // 关闭弹窗
      this.$emit("retreat"); // 触发退回逻辑
      // 不恢复 isConfirmDisabled，防止退回后还能点击确认
    },
    handleConfirm() {
      if (!this.isConfirmDisabled) {
        this.$emit("confirm");
      }
    }
  }
};
</script>

<style scoped>
.bottom-buttons {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  background-color: transparent;
  z-index: 9999;
}

.btn {
  flex: 1;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 32rpx;
  color: #ffffff;
  border: none;
  border-radius: 8rpx;
  box-shadow: 0px 4rpx 6rpx rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: 0 10rpx;
}

.retreat {
  background-color: #ff4d4f;
}

.confirm {
  background-color: #007aff;
  margin-right: 40rpx;
}

.disabled {
  background-color: #ccc !important;
  pointer-events: none; /* 禁止点击 */
}

</style>
